<template>
    <div class="pop-inser-team">
        <el-drawer
            title="插入团队"
            :visible.sync="is_drawer"
            class="drawer-box"
            @close="closeFun"
        >
            <div class="content-box">
                <el-form ref="organizerForm" :model="form" label-width="90px">
                    <el-form-item label="自定义标题">
                        <el-input
                            v-model="form.title"
                            class="input-w"
                            placeholder="请输入自定义标题"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="选择成员">
                        <div class="member-box comm-list">
                            <div
                                class="member-row"
                                v-for="item in member_list"
                                :key="item.id"
                                :class="item.is_acitve ? 'acitve' : ''"
                                @click="choiceFun(item)"
                            >
                                <div class="img-box">
                                    <img :src="item.avatar" />
                                </div>
                                <div class="name">{{ item.name }}</div>
                            </div>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import config from "@/js/conf/Config.js";

// import xxx from '@/components/comm/xxx.vue';
export default {
    props: [],
    components: {},
    computed: {},
    data() {
        return {
            is_drawer: false,
            form: {},
            member_list: [],
            pfrom: 0,
        };
    },
    created() {},
    mounted() {},
    methods: {
        initData(data) {
            this.is_drawer = true;
            this.form = data;
            if (this.member_list.length == 0) {
                this.getlistdata();
            } else {
                data.info.map((v) => {
                    this.member_list.map((vs) => {
                        if (v.uid == vs.uid) {
                            vs.is_acitve = true;
                        }
                    });
                });
            }
        },
        choiceFun(item) {
            item.is_acitve = !item.is_acitve;
            if (item.is_acitve) {
                this.form.info.push({
                    imgs: item.avatar,
                    imgs_big: item.avatar,
                    title: item.name,
                    id: item.uid,
                    uid: item.uid,
                });
            } else {
                this.form.info.map((v, i) => {
                    if (v.uid == item.uid) {
                        this.form.info.splice(i, 1);
                    }
                });
            }
        },
        async getlistdata() {
            let url = config.COMPANY_STAFF_LS;
            let param = {
                pfrom: this.pfrom,
                pnum: 20,
            };
            let res = await this.$api({ url: url, data: param });
            if (!res) return;
            if (res.status == 1 && res.data.staff_ls) {
                res.data.staff_ls.map((v) => {
                    v.is_acitve = false;
                });
                this.member_list = this.member_list.concat(res.data.staff_ls);
                this.member_list = this.member_list.concat(this.form.info);
                this.member_list = this.removeDuplicateObj(this.member_list);
                this.pfrom += 20;
                this.getlistdata();
                this.form.info.map((v) => {
                    this.member_list.map((vs) => {
                        if (v.uid == vs.uid) {
                            vs.is_acitve = true;
                        }
                    });
                });
            }
        },
        // 去重
        removeDuplicateObj(arr) {
            let obj = {};
            arr = arr.reduce((newArr, next) => {
                obj[next.uid]
                    ? ""
                    : (obj[next.uid] = true && newArr.push(next));
                next.name = next.name ? next.name : next.text;
                next.avatar = next.avatar ? next.avatar : next.imgs;

                return newArr;
            }, []);
            return arr;
        },
        closeFun() {
            this.member_list.map((v) => {
                v.is_acitve = false;
            });
            this.$emit("inContentIntro", this.form);
        },
    },
};
</script>

<style lang="scss" scoped >
.content-box {
    padding: 10px;
    .member-box {
        height: calc(100vh - 200px);
        display: flex;
        flex-wrap: wrap;
        .member-row {
            width: 80px;
            min-height: 120px;
            margin-right: 20px;
            margin-bottom: 20px;
            cursor: pointer;
            &.acitve {
                border: 1px solid #459ffd;
                margin-right: 18px;
                min-height: 118px;
            }
            .img-box {
                width: 80px;
                height: 80px;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .name {
                text-align: center;
                line-height: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                word-break: break-all;
                margin-top: 10px;
            }
        }
        .member-add {
            width: 80px;
            height: 80px;
            cursor: pointer;
            border: 1px solid #dcdfe6;
            display: flex;
            justify-content: center;
            align-items: center;
            i {
                font-size: 30px;
                color: #dcdfe6;
            }
        }
    }
}
</style>
